<template>
  <van-cell-group>
    <van-cell
      disabled
      title="照片"
      style="width: 20%; float: left;"
    />
    <van-icon name="photograph" style="margin: 14px 0;" @click="clickUpload"/>
    <img src="" id="imgDemo" style="width: 100%; display: none;">
    <form enctype="multipart/form-data" method="post" id="formImage" target="nm_iframe" style="display: none;">
      <input type="file" name="image" accept="image/*" ref="file" multiple="multiple" id="image" @change="changeImg"/>
    </form>
    <iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
    <div style="clear: both; height: 0;"></div>
  </van-cell-group>
</template>

<script>
  import {Cell, CellGroup, Button, Uploader, Icon, Toast} from 'vant';

  export default {
    name: "HeadImg",
    components: {
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Button.name]: Button,
      [Uploader.name]: Uploader,
      [Icon.name]: Icon,
      [Toast.name]: Toast,
    },
    methods: {
      setMsg() {
        let _this = this;
        let token = _this.getCookie("token");
        $("#formImage").ajaxSubmit({
          url: _this.apiUrl("user/users/setImage"),
          type: 'POST',
          cache: false,
          headers: {
            'token': token,
          },
          dataType: "json",
          processData: false,
          contentType: false,
          success: (res) => {
            if (res.statusCode === 200) {
              Toast.success('修改成功');
              _this.returnFlag(true);
            }
          },
          error: function (error) {
            _this.returnFlag(false);
          }
        });
      },
      returnFlag(flag) {
        let _this = this;
        if (flag) {
          _this.$emit("giveFlag", _this.randomWord(true, 10, 20));
        }
        else {
          _this.$emit("giveFlag", "null");
        }
      },
      clickUpload() {
        $("#image").click();
      },
      changeImg(){
        let _this = this;
        let image = _this.$refs.file.files[0];
        $("#imgDemo").attr("src", URL.createObjectURL(image));
        $("#imgDemo").css("display", "block");
      }
    },
  }
</script>

<style scoped>
</style>
